<!DOCTYPE html>
<html>
  <head>
	<meta charset="utf-8"> 
	<title>Bootstrap 实例</title>
	<!-- 包含头部信息用于适应不同设备 -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<!-- 包含 bootstrap 样式表 -->
	<link rel="stylesheet" href="./css/bootstrap.min.css">
  </head>

  <body>
	  
	  <div class="container">
		  
		  <div class="row">
		  <div class="col-md-12">
			  <h1 style="text-align: center;">易小勤考勤系统</h1>
		  </div>
		  </div>
		  
		  <div>
			  <div class="col-md-2">
				  <ul class="nav nav-pills nav-stacked">
				    <li role="presentation" class="active"><a href="#">学生管理</a>
						<ul class="nav nav-pills nav-stacked" >
							<li role="presentation">新增学生</li>
							<li role="presentation">新增学生</li>
							<li role="presentation">新增学生</li>
						</ul>
					</li>
				    <li role="presentation"><a href="#">申请请假</a></li>
				    <li role="presentation"><a href="#">班级管理</a></li>
				  </ul>
			  </div>
			  
			  <div class="col-md-10">
				  
				  <div class="row">
				  			  <div class="col-md-4">
				  				  <button class="btn btn-primary">新增</button>
				  				  <button class="btn btn-danger">删除</button>
				  			  </div>
				  			  
				  </div>
				  <div class="row">
				  			  <div class="col-md-12">
				  				  <table class="table table-hover ">
				  					  <tr>
				  						 <th>#</th>
				  						 <th>姓名</th>
				  						 <th>性别</th>
				  						 <th>邮箱</th>
				  						 <th>班级</th>
				  						 <th>操作</th>
				  					  </tr>
				  					  
				  					  <tr>
				  						  <td>10010</td>
				  						  <td>周海燕</td>
				  						  <td>女</td>
				  						  <td>1284810796@qq.com</td>
				  						  <td>后端班</td>
				  						  <td>
				  							  <button class="btn btn-primary btn-sm">
				  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
				  							  </button>
				  							  
				  							  <button class="btn btn-danger btn-sm">
				  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
				  							  </button>
				  						  </td>
				  					  						 
				  					  </tr>
				  					  <tr>
				  						  <td>10020</td>
				  						  <td>方雅浩</td>
				  						  <td>男</td>
				  						  <td>1284810796@qq.com</td>
				  						  <td>后端班</td>
				  						  <td>
				  							  <button class="btn btn-primary btn-sm">
				  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
				  							  </button>
				  							  
				  							  <button class="btn btn-danger btn-sm">
				  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
				  							  </button>
				  						  </td>
				  					  						 
				  					  </tr>
				  					  <tr>
				  						  <td>10010</td>
				  						  <td>周海燕</td>
				  						  <td>女</td>
				  						  <td>1284810796@qq.com</td>
				  						  <td>后端班</td>
				  						  <td>
				  							  <button class="btn btn-primary btn-sm">
				  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
				  							  </button>
				  							  
				  							  <button class="btn btn-danger btn-sm">
				  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
				  							  </button>
				  						  </td>
				  						 
				  					  </tr>
				  					  <tr>
				  						  <td>10020</td>
				  						  <td>方雅浩</td>
				  						  <td>男</td>
				  						  <td>1284810796@qq.com</td>
				  						  <td>后端班</td>
				  						  <td>
				  							  <button class="btn btn-primary btn-sm">
				  								  <span class="glyphicon glyphicon-pencil" aria-hidden="true"></span>编辑
				  							  </button>
				  							  
				  							  <button class="btn btn-danger btn-sm">
				  								<span class="glyphicon glyphicon-trash" aria-hidden="true"></span>删除
				  							  </button>
				  						  </td>
				  					  						 
				  					  </tr>
				  				  </table>
				  				  
				  			  </div>
				  </div>
				  
				  <!-- 显示分页条 -->
				  <div class="row">
				  			  
				  			  <div class="col-md-6">
				  				  总页数：
				  			  </div>
				  			  <div class="col-md-6">
				  				  <nav aria-label="Page navigation">
				  				    <ul class="pagination">
				  					  <li><a href="#">首页</a></li>
				  				      <li>
				  				        <a href="#" aria-label="Previous">
				  				          <span aria-hidden="true">&laquo;</span>
				  				        </a>
				  				      </li>
				  				      <li><a href="#">1</a></li>
				  				      <li><a href="#">2</a></li>
				  				      <li><a href="#">3</a></li>
				  				      <li><a href="#">4</a></li>
				  				      <li><a href="#">5</a></li>
				  				      <li>
				  				        <a href="#" aria-label="Next">
				  				          <span aria-hidden="true">&raquo;</span>
				  				        </a>
				  				      </li>
				  					  <li><a href="#">末页</a></li>
				  				    </ul>
				  				  </nav>
				  			  </div>
				  </div>
			  				  
			  </div>
		  </div>
		  
	  </div>
	  
	  <script src="js/jquery-2.1.1.min.js"></script>
	  <!-- 可选: 合并了 Bootstrap JavaScript 插件 -->
	  <script src="js/bootstrap.min.js"></script>
  </body>

</html>
